<template>
    <el-row :gutter="40">
        <template v-if="!form.id">
            <el-col>
                <el-empty :description="$t('menu.selectLeftMenu')" :image-size="100"></el-empty>
            </el-col>
        </template>
        <template v-else>
            <el-col :lg="10">
                <h2>{{ form.title || $t('menu.newMenu') }}</h2>
                <el-form :model="form" :rules="rules" ref="dialogFormRef" label-width="80px" label-position="left">
                    <el-form-item :label="$t('menu.showName')" prop="title">
                        <el-input v-model="form.title" clearable :placeholder="$t('menu.namePlaceholder')"></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('menu.parentMenu')" prop="pid">
                        <el-cascader v-model="form.pid" :options="menuOptions" :props="menuProps" :show-all-levels="false"
                            :placeholder="$t('menu.topMenu')" clearable disabled></el-cascader>
                    </el-form-item>
                    <el-form-item :label="$t('menu.type')" prop="type">
                        <el-radio-group v-model="form.type">
                            <el-radio-button label="menu">{{ $t('menu.type_name') }}</el-radio-button>
                            <el-radio-button label="iframe">{{ $t('menu.type_iframe') }}</el-radio-button>
                            <el-radio-button label="link">{{ $t('menu.type_link') }}</el-radio-button>
                            <el-radio-button label="button">{{ $t('menu.type_button') }}</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item :label="$t('menu.alias')" prop="name">
                        <el-input v-model="form.name" clearable :placeholder="$t('menu.aliasMenu')"></el-input>
                        <div class="el-form-item-msg">{{ $t('menu.aliasTips') }}</div>
                    </el-form-item>
                    <el-form-item :label="$t('menu.icon')" prop="icon">
                        <sc-icon-select v-model="form.icon" clearable></sc-icon-select>
                    </el-form-item>
                    <el-form-item :label="$t('menu.path')" prop="path">
                        <el-input v-model="form.path" clearable></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('menu.redirect')" prop="redirect">
                        <el-input v-model="form.redirect" clearable></el-input>
                    </el-form-item>
                    <el-form-item :label="$t('menu.active')" prop="active">
                        <el-input v-model="form.active" clearable></el-input>
                        <div class="el-form-item-msg">{{ $t('menu.activeTips') }}</div>
                    </el-form-item>
                    <el-form-item :label="$t('menu.view')" prop="component">
                        <el-input v-model="form.component" clearable>
                            <template #prepend>views/</template>
                        </el-input>
                        <div class="el-form-item-msg">{{ $t('menu.viewTips') }}</div>
                    </el-form-item>
                    <el-form-item :label="$t('menu.color')" prop="color">
                        <el-color-picker v-model="form.color" :predefine="predefineColors"></el-color-picker>
                    </el-form-item>
                    <el-form-item :label="$t('menu.hidden')" prop="hidden">
                        <el-checkbox v-model="form.hidden">{{ $t('menu.hiddenMenu') }}</el-checkbox>
                        <el-checkbox v-model="form.hidden_breadcrumb">{{ $t('menu.hiddenBreadcrumb') }}</el-checkbox>
                        <div class="el-form-item-msg">{{ $t('menu.hiddenTips') }}</div>
                    </el-form-item>
                    <el-form-item :label="$t('menu.fullpage')" prop="fullpage">
                        <el-switch v-model="form.fullpage" />
                    </el-form-item>
                    <el-form-item :label="$t('menu.tag')" prop="tag">
                        <el-input v-model="form.tag" clearable placeholder=""></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="save" :loading="loading">{{ $t('common.save') }}</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :lg="14" class="api_list">
                <h2>{{ $t('menu.api') }}</h2>
                <sc-form-table v-model="form.api_list" :addTemplate="apiListAddTemplate" :placeholder="$t('menu.noApi')">
                    <el-table-column prop="code" :label="$t('menu.code')">
                        <template #default="scope">
                            <el-input v-model="scope.row.code" :placeholder="$t('menu.placeholder')"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="type" :label="$t('menu.type')">
                        <template #default="scope">
                            <el-input v-model="scope.row.type" :placeholder="$t('menu.placeholder')"></el-input>
                        </template>
                    </el-table-column>
                    <el-table-column prop="url" :label="$t('menu.url')">
                        <template #default="scope">
                            <el-input v-model="scope.row.url" :placeholder="$t('menu.placeholder')"></el-input>
                        </template>
                    </el-table-column>
                </sc-form-table>
            </el-col>
        </template>
    </el-row>
</template>
<script setup>
import { ref, reactive, watch } from 'vue';
import api from '@/api';
import { ElMessage } from "element-plus";

// 定义用于发射方法
const props = defineProps({
    menu: { type: Object, default: () => { } },
});
// 定义响应式数据
const form = reactive({
    id: "",
    pid: "",
    name: "",
    path: "",
    component: "",
    redirect: "",
    title: "",
    icon: "",
    active: "",
    color: "",
    type: "menu",
    fullpage: false,
    tag: "",
    api_list: [],
});
const dialogFormRef = ref(null);
const menuOptions = ref([]);
const menuProps = reactive({
    value: 'id',
    label: 'title',
    checkStrictly: true,
});
const predefineColors = ['#ff4500', '#ff8c00', '#ffd700', '#67C23A', '#00ced1', '#409EFF', '#c71585'];
const rules = ref([]);
const apiListAddTemplate = reactive({
    code: "",
    type: "",
    url: "",
});
const loading = ref(false);
// 监听menu的变化
watch(() => props.menu, (newValue) => {
    menuOptions.value = treeToMap(newValue);
}, { deep: true });
// 简单化菜单
const treeToMap = (tree) => {
    const map = [];
    tree.forEach(item => {
        const obj = {
            id: item.id,
            pid: item.pid,
            title: item.title,
            children: item.children && item.children.length > 0 ? treeToMap(item.children) : null
        };
        map.push(obj);
    });
    return map;
};
// 保存
const save = async () => {
    loading.value = true;
    const res = await api.setting.menu.edit.post(form);
    loading.value = false;
    if (res.code == 200) {
        ElMessage.success(res.message);
    } else {
        ElMessage.warning(res.message);
    }
};
// 表单注入数据
const setData = (data, pid) => {
    Object.assign(form, data, { api_list: data.api_list || [], pid });
};
defineExpose({ setData });
</script>
<style scoped>
h2 {
    font-size: 17px;
    color: #3c4a54;
    padding: 0 0 30px 0;
}
.apilist {
    border-left: 1px solid #eee;
}
[data-theme="dark"] h2 {
    color: #fff;
}
[data-theme="dark"] .apilist {
    border-color: #434343;
}
</style>